<template> 
    <div style="background-color: rgb(39, 148, 211); height: 929px;">
        <div >
            <img 
            style="width: 200px;
            margin-left: 40px;" src="/src//assests//logo2.png" alt="">
            <span style="float: right;
            margin-top: 40px;
            margin-right: 20px;
            font-family: 宋体;
            color: #2b2b2b;">客服热线-19872050773</span>
        </div>
        <div style="display: flex;
        justify-content: center;">
            <el-card style="padding: 30px;">
                <img style="width: 400px;" src="/src/assests/image.png" alt="">
                <div style="display: inline-block;">
                    <el-card class="card" >
                        <div style="font-size: 50px;font-family: cursive; 
                        font-weight: 900;
                        color: #5ac3fc;
                        font-style: italic;"
                        >找工作就上博才招聘!</div>
                        <div style="margin-top: 50px;" v-if="useStore.flag === 'login'">
                            <t-form ref="form" :data="formData"
                            :colon="true"
                            :label-width="0"
                            @reset="onReset"
                            @submit="onSubmit"
                            >
                                <t-form-item name="account" class="form">
                                    <h2>登录</h2>
                                </t-form-item>
                                <t-form-item name="account" class="form">
                                    <t-input v-model="formData.cardId" clearable placeholder="请输入账户名ID">
                                        <template #prefix-icon>
                                        <desktop-icon />
                                        </template>
                                    </t-input>
                                </t-form-item>
                    
                                <t-form-item name="password" class="form">
                                    <t-input v-model="formData.password" type="password" clearable placeholder="请输入密码">
                                        <template #prefix-icon>
                                        <lock-on-icon />
                                        </template>
                                    </t-input>
                                </t-form-item>
                                <t-from-item style="margin-left: 30px;"> 
                                    <t-checkbox v-model="is_check" >已阅读并同意博才招聘
                                        <a class="styled-link" @click="$router.push('/rules')">《用户协议》</a>
                                        <a class="styled-link" @click="$router.push('/policy')">《隐私政策》</a>
                                    </t-checkbox>
                                </t-from-item>
                                <t-form-item style="margin-top: 20px;">
                                    <t-button class="form" theme="primary"  @click="login">登录</t-button>
                                </t-form-item>
                            </t-form>
                        </div>
                        <div style="display: flex;
                        justify-content: center;
                        margin-top: 110px;"
                        v-if="useStore.flag === 'login'">
                            <span style="width: 50%; text-align: right;">
                                <span class="styled-link" @click="register">立即注册</span> </span>
                            <span>|</span>
                            <span style="width: 50%;">
                            <span class="styled-link" @click="getpassword">忘记密码？</span> </span>
                        </div>
                        <!-- --------------------- -->
                        <div style="margin-top: 50px;" v-if="useStore.flag === 'register'">
                            <t-form ref="form" :data="formData"
                            :colon="true"
                            :label-width="0"
                            @reset="onReset"
                            @submit="onSubmit"
                            >
                                <t-form-item name="cardId" class="form">
                                    <h2>注册账号</h2>
                                </t-form-item>
                                <t-form-item name="cardId" class="form">
                                    <t-input v-model="formData.cardId" clearable placeholder="请输入个人身份ID">
                                        <template #prefix-icon>
                                        <desktop-icon />
                                        </template>
                                    </t-input>
                                </t-form-item>
                    
                                <t-form-item name="password" class="form">
                                    <t-input v-model="formData.password" type="password" clearable placeholder="请输入密码">
                                        <template #prefix-icon>
                                        <lock-on-icon />
                                        </template>
                                    </t-input>
                                </t-form-item>
                                <t-form-item name="repassword" class="form">
                                    <t-input v-model="formData.repassword" type="repassword" clearable placeholder="请再次输入密码">
                                        <template #prefix-icon>
                                        <lock-on-icon />
                                        </template>
                                    </t-input>
                                </t-form-item>
                                <t-form-item style="margin-top: 20px;">
                                    <t-button class="form" theme="primary"  @click="check_register">注册</t-button>
                                </t-form-item>
                            </t-form>
                            <div style="
                            margin-top: 90px;"
                            v-if="useStore.flag === 'register'">
                                <el-button @click="back_login">
                                    <ArrowLeftIcon />返回登录
                                </el-button>
                            </div>
                        </div>
                         <!-- --------------------- -->
                         <div style="margin-top: 50px;" v-if="useStore.flag === 'getback'">


                            <t-form ref="form" :data="formData"
                            :colon="true"
                            :label-width="0"
                            @reset="onReset"
                            @submit="onSubmit"
                            >
                                <t-form-item name="account" class="form">
                                    <h2>找回密码</h2>
                                </t-form-item>
                                <t-form-item name="username" class="form">
                                    <t-input v-model="formData.username" clearable placeholder="请输入用户名">
                                        <template #prefix-icon>
                                        <desktop-icon />
                                        </template>
                                    </t-input>
                                </t-form-item>
                    
                                <t-form-item name="cardId" class="form">
                                    <t-input v-model="formData.cardId" type="card_id" clearable placeholder="请输入个人身份证件号码">
                                        <template #prefix-icon>
                                        <lock-on-icon />
                                        </template>
                                    </t-input>
                                </t-form-item>
                                <t-form-item style="margin-top: 20px;">
                                    <t-button class="form" theme="primary"  @click="getback_password">找回密码</t-button>
                                </t-form-item>
                            </t-form>
                            <div style="
                                margin-top: 146px;"
                                v-if="useStore.flag === 'getback'">
                                    <el-button @click="back_login">
                                        <ArrowLeftIcon />返回登录
                                    </el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-card>
        </div>
        
          
    </div> 
    
</template>  

<script setup>  
import { ref, onMounted, onUnmounted, watch } from 'vue';  
import { reactive } from 'vue';
import { ElMessageBox } from 'element-plus'
import axios from 'axios';
import { MessagePlugin } from 'tdesign-vue-next';
import { DesktopIcon, LockOnIcon, ArrowLeftIcon } from 'tdesign-icons-vue-next';
import { useUserStore,useQueryStore } from '@/stores'
import { useRouter } from 'vue-router'
const router = useRouter()
const queryStore = useQueryStore()
const formData = reactive({
    cardId: '',
    username: '',
    password: '',
    repassword: '',
});

const onReset = () => {
  MessagePlugin.success('重置成功');
};

const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    MessagePlugin.success('提交成功');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};


const is_check = ref(null)
const useStore = useUserStore()
watch(is_check, (x) => {
    console.log(x)
})
const login = () => {
    if(!formData.cardId || !formData.password){
        MessagePlugin.error('请输入账号和密码！')
    }else if(!is_check.value){
        MessagePlugin.error('请阅读并同意博才招聘相关协议政策')
    }else{
        axios.post('http://localhost:8000/user/login',{
        cardId: formData.cardId,
        password: formData.password,
        }).then(resp => {
            if(resp.data.code === 1){
                MessagePlugin.success('登录成功！')
                useStore.setToken(resp.data.data.token)
                useStore.login_success(resp.data.data)
                if(useStore.user.expectJob && useStore.user.expectJob !== null){
                    queryStore.setQuery({
                        job : useStore.user.expectJob,
                        city: useStore.user.expectCity,
                    })
                    router.push('/')
                }else{
                    router.push('/guide')
                }
                
            }
            else{
                MessagePlugin.error(resp.data.msg)
            }
        }).catch(error => {
            MessagePlugin.error('请求失败！')
        })
    }
}
const register_user = () => {
    // console.log(formData.cardId)
    // console.log(formData.password)
    axios.post('http://localhost:8000/user/register',{
        cardId: formData.cardId,
        password: formData.password,
    }).then(resp => {
        if(resp.data.code === 1){
                MessagePlugin.success('注册成功！')
                back_login()
        }
        else{
            MessagePlugin.error(resp.data.msg)
        }
    }).catch(error => {
            MessagePlugin.error('请求失败！')
    })
}
const getback_password = () => {
    if(!formData.username || !formData.cardId){
        MessagePlugin.error('请输入用户名或证件号码！')
    }else{
        axios.post('http://localhost:8000/user/backpd',{
            username: formData.username,
            cardId: formData.cardId,
        }).then(resp => {
            if(resp.data.code === 1){
                MessagePlugin.success('您的密码是' + resp.data.data)
            }
            else{
                MessagePlugin.error(resp.data.msg)
            }
        }).catch(error => {
                MessagePlugin.error('请求失败！')
        })
    }
} 
const register = () => {
    useStore.setFlag('register')
    formData.cardId = ''
    formData.password = ''
}
const getpassword = () => {
    useStore.setFlag('getback')
    formData.cardId = ''
    formData.password = ''
}
const back_login = () => {
    useStore.setFlag('login')
    formData.cardId = ''
    formData.password = ''
    formData.username = ''
    formData.repassword = ''
}
const check_register = () => {
    if(!formData.cardId || !formData.password || !formData.repassword){
        MessagePlugin.error('请输入用户名和密码！')
    }else if(formData.password !== formData.repassword){
        MessagePlugin.error('两次输入密码不一致！')
    }else {
        register_user()
        console.log("hj")
    }
}
</script>  

<style scoped>
.styled-link {  
  /* 未访问链接 */  
  color: #007BFF; /* 蓝色文字 */  
  text-decoration: none; /* 无下划线 */  
  transition: color 0.3s ease; /* 平滑的颜色过渡效果 */  
    cursor: pointer;
}   
.styled-link:visited {  
  /* 已访问链接 */  
  color: #007BFF;  
}  
  
.styled-link:active {  
  /* 激活链接（点击时） */  
  color: #007BFF; 
}  


.card{
    width: 430px;
    height: 600px;
}
.form{
    width: 320px;
    margin-left: 30px;
}
</style>